<template>
    <div class="login">
        <!-- 上面导航栏 -->
        <div class="banner">
            <van-icon @click="toHome" class="item left" name="wap-home-o" size="26" style="color:#4F4F4F;" />
            <div class="middle">
                网易严选
            </div>
            <div class="item right">
                <van-icon name="search" size="26" style="margin-right: 10px;color:#4F4F4F;" />
                <van-icon name="shopping-cart-o" size="26" style="color:#4F4F4F;" />
            </div>
        </div>
        <!-- logo图标 -->
        <img class="logo" src="https://yanxuan.nosdn.127.net/static-union/164793255107785e.png" alt="">
        <!-- 注册页 -->
        <div class="loginMain" v-if="!flag">
            <van-form @failed="onFailed" class="form" @submit="onSubmit">
                <van-field class="item" v-model="rePhone" name="rePhone" placeholder="请输入手机号"
                    :rules="[{ pattern, message: '请输入正确手机号' }]" />
                <van-field v-model="Captcha" center clearable placeholder="请输入短信验证码"
                    :rules="[{ trigger: 'onBlur', message: '请输入验证码' }]">
                    <template #button>
                        <van-button size="small" type="default" @click="sendCode">获取验证码</van-button>
                    </template>
                </van-field>

                <van-field v-if="!flag" v-model="rePassword" name="rePassword" class="item" type="password"
                    placeholder="请输入密码" />
                <van-field v-model="rePassword1" type="password" name="rePassword1" v-if="!flag" class="item"
                    placeholder="再次输入密码" />

                <!-- 忘记密码/遇到问题 -->
                <div style="margin: 16px;">
                    <div class="problem">
                        <div class="left">遇到问题?</div>
                        <div class="validate" @click="changeFlag()">使用密码验证登录</div>
                    </div>
                    <van-button block type="danger" native-type="submit" submit="onSubmit">
                        注册
                    </van-button>
                </div>
            </van-form>

            <!-- 登录按钮 -->
            <div class="checkbox">
                <input type="checkbox" value="" class="input" v-model="check">
                <div class="words">同意《服务条款》和《隐私政策》和《网易严选服务协议》</div>
            </div>
        </div>

        <!-- 登录页 -->
        <div class="loginMain" v-if="flag">
            <van-form @failed="onFailed" class="form" @submit="onSubmit">
                <!-- 通过 pattern 进行正则校验 -->
                <van-field class="item" v-model="phone" name="phone" placeholder="请输入手机号"
                    :rules="[{ pattern, message: '请输入正确手机号' }]" />
                <!-- <van-cell-group> -->
                <van-field v-if="flag" class="item" v-model="password" name="password" placeholder="请输入密码"
                    type="password" />

                <!-- 忘记密码/遇到问题 -->
                <div style="margin: 16px;">
                    <div class="problem">
                        <div class="left">忘记密码?</div>
                        <div class="validate" @click="changeFlag">注册账号</div>
                    </div>
                   
                    <van-button block type="danger" native-type="submit">
                        登录
                    </van-button>
                </div>
            </van-form>

            <!-- 登录按钮 -->
            <div class="checkbox" v-if="!flag">
                <input type="checkbox" value="" class="input" v-modek="check" @click="checkHandle">
                <div class="words">同意《服务条款》和《隐私政策》和《网易严选服务协议》</div>
            </div>
        </div>


        <div class="mainBox">
            <div class="other">其他登录方式 ></div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, watch, onMounted } from 'vue';
import router from '../../router';
import { useUserInfoStore } from '../../stores/user/index';
import { reqGetUserCode } from '../../api/user/userInfo'
import { useRoute, useRouter } from 'vue-router';

// 协议响应数据
const check = ref(false);
const route = useRoute();
// const router = useRouter();

const phone = ref('13700000000');
// 注册的手机号
const rePhone = ref('')
const password = ref('111111');
const flag = ref(true);
// 验证码
const Captcha = ref('');
// 注册密码
const rePassword = ref('');
// 确认密码
const rePassword1 = ref('')
// 校验正则，校验手机号
const pattern = /\d{11}/
// 获取仓库
const useUserStore = useUserInfoStore();

// 点击选中框
const checkHandle = () => {
    check.value = !check.value
}

// 获取注册验证码
const sendCode: any = async () => {
    let result = await reqGetUserCode(rePhone.value)
    Captcha.value = result.data;
}

// 两次输入密码保持一致
const validator = (value: boolean, rule: string) => {
    console.log(value, rule)
}

// 存储地址栏query参数
const redirect = ref('');
onMounted(() => {
    // console.log(route.query)
})
const toHome = () => {
    router.push({ path: '/home' })
}
// 监听路由发生变化,跳转到个人中心页面
watch(
    route,
    // flag,
    () => {
        // redirect.value = route.query
    },
    { immediate: true }
)
// 点击切换验证码登录
const changeFlag = () => {
    flag.value = !flag.value
}

const onFailed = (errorInfo: any) => {
    console.log('failed', errorInfo);
};

//点击登录按钮进行跳转/注册
const onSubmit = async (values: any) => {
    if (flag.value) {
        const { phone, password } = values;
        await useUserStore.login(phone, password);
        try {
            router.push({ path: '/home' || redirect.value || "/" });
            alert('登录成功')
        } catch { 
            return;
        }
    } else {
        // console.log(values.rePassword);
        if (values.rePassword = '') { alert('密码不能为空'); return };
        // if (values.rePassword != values.rePassword1) { alert('两次密码不一致'); return }
        if (!check.value) { alert('请选中《网易协议》'); return }
        // const { rePhone, Captcha, rePassword } = values;
        // console.log(rePhone, Captcha, rePassword)
        
        
        await useUserStore.register({ phone: rePhone.value, code: Captcha.value, password: rePassword.value });
        flag.value = true;
        alert('注册成功')
    }
}


</script>


<style scoped lang="less">
.login {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

    // 上面导航栏
    .banner {
        width: 375px;
        height: 44px;
        display: flex;
        background: #fafafa;
        justify-content: space-between;
        align-items: center;

        .middle {
            padding-left: 20px;
            height: 25px;
            line-height: 27px;
            font-size: 20px;
            font-weight: 550;
        }

        .left {
            padding-left: 10px;
        }

        .right {
            padding-right: 10px;
        }
    }

    // 中间input框
    .logo {
        width: 134px;
        height: 45px;
        padding: 28px
    }

    .loginMain {
        width: 336px;
        

        input {
            padding: 0
        }

        .checkbox {
            width: 312px;
            height: 44px;  
            display: flex;
            font-size: 15px;
            color: #7f7f7f;
        }

        .problem {
            display: flex;
            justify-content: space-between;
            margin: 18px 0 18px;
            font-size: 15px;

            .left {
                color: #7f7f7f;
            }
        }

    }

    .mainBox {
        flex: 1;
        display: flex;
        flex-direction: column;

        .other {
            margin-top: 62px;
            font-size: 15px;
        }
    }

}
</style>